<template>
  <div
    :key="1"
    class="login min-h-screen py-4 flex items-center bg-white bg-opacity-60"
  >
    <el-row
      type="flex"
      justify="center"
      class="w-full"
    >
      <el-col
        :xs="20"
        :sm="18"
        :md="16"
        :lg="10"
      >
        <el-card class="box-card">
          <div class="text-lg text-indigo-400 font-bold mb-4">
            登录
          </div>
          <div>
            <el-row :gutter="15">
              <el-form
                ref="elForm"
                :model="formData"
                :rules="rules"
                size="medium"
                label-width="100px"
              >
                <el-col :span="24">
                  <el-form-item
                    label="账户名"
                    prop="username"
                    class="is-no-asterisk"
                  >
                    <el-input
                      v-model="formData.username"
                      placeholder="请输入账户名"
                      clearable
                      prefix-icon="el-icon-user"
                      :style="{width: '100%'}"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item
                    label="密码"
                    prop="pass"
                    class="is-no-asterisk"
                  >
                    <el-input
                      v-model="formData.pass"
                      placeholder="请输入密码"
                      clearable
                      prefix-icon="el-icon-key"
                      show-password
                      :style="{width: '100%'}"
                    />
                  </el-form-item>
                </el-col>
                <el-col
                  v-if="enable_captcha"
                  :span="18"
                >
                  <el-form-item
                    label="验证码"
                    prop="captcha"
                    class="is-no-asterisk"
                  >
                    <el-input
                      v-model="formData.captcha"
                      placeholder="请输入验证码"
                      clearable
                      prefix-icon="el-icon-more-outline"
                      :style="{width: '100%'}"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item size="large">
                    <el-button
                      type="primary"
                      @click="submitForm"
                    >
                      登录
                    </el-button>
                  </el-form-item>
                </el-col>
              </el-form>
            </el-row>
          </div>
        </el-card>
        <div class="float-right text-indigo-400 mt-2 mr-4">
          <router-link to="/user/register">
            <i class="el-icon-s-check" />
            注册
          </router-link>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  components: {},
  props: [],
  data () {
    return {
      enable_captcha: false,
      formData: {
        username: undefined,
        pass: undefined,
        captcha: ''
      },
      rules: {
        username: [{
          required: true,
          message: '请输入账户名',
          trigger: 'blur'
        }],
        pass: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        }],
        captcha: [{
          required: true,
          message: '请输入验证码',
          trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    submitForm () {
      this.$refs.elForm.validate(valid => {
        if (!valid) {
          return
        }
        this.axios.get('/api/ent/login', {
          params: {
            username: this.formData.username,
            password: this.formData.pass
          }
        }).then(function (r) {
          const data = r.data
          if (data.success) {
            this.$store.commit('loadEntData', data.detail)
            this.$router.push({ name: 'user_home' })
          } else {
            this.$alert(data.msg, '登录失败')
          }
        }.bind(this))
      })
    }
  }
}
</script>
